<template>
  <div>
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card
          :loading="loading"
          title="日访问量"
          :total="statisticsData.visitNumber.dayNumber"
        >
          <a-tooltip title="访问量统计" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <template slot="footer"
            >{{ "月访问量"
            }}<span class="footer-value-content"
              ><a href="javascript:;">{{
                statisticsData.visitNumber.monthNumber
              }}</a></span
            ></template
          >
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card
          :loading="loading"
          title="日砍价成功"
          :total="statisticsData.successNumber.dayNumber"
        >
          <a-tooltip title="砍价成功量统计" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <template slot="footer"
            >月砍价成功<span class="footer-value-content">
              <a href="javascript:;">{{
                statisticsData.successNumber.monthNumber
              }}</a></span
            ></template
          >
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="订单数">
          <a-tooltip title="订单数统计" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <a-row>
              <a-col :span="12"> 日 </a-col>
              <a-col :span="12" class="main-value-content">
                {{ statisticsData.orderNumber.dayNumber }}
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12"> 周 </a-col>
              <a-col :span="12" class="main-value-content">
                {{ statisticsData.orderNumber.weekNumber }}
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12"> 月 </a-col>
              <a-col :span="12" class="main-value-content">
                {{ statisticsData.orderNumber.monthNumber }}
              </a-col>
            </a-row>
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card
          :loading="loading"
          title="未发货"
          :total="statisticsData.otherNumber.notSendGoodsNumber"
          :showFooter="false"
        >
          <a-tooltip title="未发货量与总用户数统计" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <div
              style="
                padding-top: 16px;
                border-top: 1px solid #e8e8e8;
                color: rgba(0, 0, 0, 0.45);
              "
            >
              总用户数
            </div>
            <div style="padding-top: 10px; font-size: 18px; font-weight: 700">
              <a href="javascript:;">{{ statisticsData.otherNumber.totalUserNumber }}</a>
            </div>
          </div>
          <template slot="footer" style="min-height: 0 !important"></template>
        </chart-card>
      </a-col>
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{ padding: '0' }">
      <div class="card-content" slot="title">
        <a-tabs default-active-key="1" size="large" @change="changeTab">
          <a-tab-pane loading="true" tab="本周" key="1"></a-tab-pane>
          <a-tab-pane tab="全年" key="2"></a-tab-pane>
        </a-tabs>
        <div class="extra-wrapper">
          <a-range-picker
            format="YYYY-MM-DD"
            :style="{ width: '256px' }"
            @change="onChange"
          />
        </div>
      </div>
      <a-row>
        <a-col :xl="23" :lg="23" :md="23" :sm="23" :xs="23">
          <bar :data="barData" ref="bar" :title="'访问量/砍价成功'" />
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
import moment from "moment";
import { ChartCard, Bar } from "@/components";
import { getBarData, getStatisticsData } from "@/api/dashboard";
import { baseMixin } from "@/store/app-mixin";

export default {
  name: "Analysis",
  mixins: [baseMixin],
  components: {
    ChartCard,
    Bar,
  },
  data() {
    return {
      loading: true,
      activeKey: "1",
      time: [],
      barData: [],
      pieStyle: {
        stroke: "#fff",
        lineWidth: 1,
      },
      statisticsData: {
        orderNumber: {
          dayNumber: 0,
          monthNumber: 0,
          weekNumber: 0,
        },
        otherNumber: {
          notSendGoodsNumber: 0,
          totalUserNumber: 0,
        },
        successNumber: {
          dayNumber: 0,
          monthNumber: 0,
        },
        visitNumber: {
          dayNumber: 0,
          monthNumber: 0,
        },
      },
    };
  },
  computed: {
    searchTableColumns() {
      return [
        {
          dataIndex: "index",
          title: this.$t("dashboard.analysis.table.rank"),
          width: 90,
        },
        {
          dataIndex: "keyword",
          title: this.$t("dashboard.analysis.table.search-keyword"),
        },
        {
          dataIndex: "count",
          title: this.$t("dashboard.analysis.table.users"),
        },
        {
          dataIndex: "range",
          title: this.$t("dashboard.analysis.table.weekly-range"),
          align: "right",
          sorter: (a, b) => a.range - b.range,
          scopedSlots: { customRender: "range" },
        },
      ];
    },
  },
  created() {
    this.getStatisticsData();
    this.getBarData();
    setTimeout(() => {
      this.loading = !this.loading;
    }, 1000);
  },
  methods: {
    //获取条形图数据
    getBarData(time = []) {
      let data = {
        type: this.activeKey,
      };
      if (time[0]) {
        data.startDate = time[0];
        data.endDate = time[1];
      }
      getBarData(data).then((res) => {
        if (res.code === 200) {
          this.barData = res.data;
        }
      });
    },
    //获取访问量/砍价成功数/订单数/未发货/总用户数的数据
    getStatisticsData() {
      getStatisticsData().then((res) => {
        if (res.code === 200) {
          this.statisticsData = res.data;
        }
      });
    },
    //changeTab
    changeTab(key) {
      this.activeKey = key;
      this.getBarData();
    },
    onChange(value,dateString) {
      console.log(dateString)
      this.getBarData(dateString)
    },
  },
};
</script>

<style lang="less" scoped>
.card-content {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;
  margin-left: 24px;
  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}
/deep/ .ant-card-head {
  border: none !important;
}
/deep/.ant-tabs-nav-container {
  margin-bottom: 0;
}
.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
    position: relative;
    border: none !important;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
.footer-value-content {
  margin-left: 30px;
}
.main-value-content {
  font-size: 20px;
  font-weight: 700;
}
</style>
